<template>
	<view>
		<view class="img-wrapper">
			<image class="status-img" :src="src" mode="widthFix"></image>
		</view>
		
		<view class="text-wrapper">
			<!-- <view class="title">您已成功预约</view> -->
			<view class="note">{{note}}</view>
		</view>
		
		<view class="btn-wrapper" v-if="showBtn">
			<navigator class="inner-wrapper" :url="url" :open-type="openType" hover-class="none">
				<slot>
					<button class="btn look-appoint-btn" hover-class="btn-hover">{{btn_text}}</button>
				</slot>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			openType: {
				type: String,
				default: 'navigate'
			},
			note: {
				type: String,
				default: '这里空空如也～'
			},
			src: {
				type: String,
				default: ''
			},
			url: {
				type: String
			},
			btn_text: {
				type: String,
				default: '去看看'
			},
			showBtn: {
				type: Boolean,
				default: false
			},
			top: {
				type: [Number, String],
				default: '320rpx'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.img-wrapper{
		width: 240rpx;
		// height:360rpx;
		margin: 320rpx auto 0;
		overflow: hidden;
		margin-top: v-bind(top);
		
		.status-img{
			width: 240rpx;
		}
	}
	
	.text-wrapper{
		text-align: center;
		
		.title{
			font-size: 18px;
			font-weight: bold;
		}
		.note{
			font-size: 30rpx;
			color: #999;
			line-height: 1.5;
			margin-top: 8rpx;
			white-space: pre-line;
			word-break: break-word;
		}
	}
	
	.btn-wrapper{
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 90rpx;
		
		.inner-wrapper {
			width: 100%;
		}
		.look-appoint-btn{
      padding: 0 32rpx;
      text-align: center;
      height: 88rpx;
      line-height: 88rpx;
			color: #222;
			font-size: 30rpx;
      background-color: $uni-color-primary;
      border-radius: 44rpx;
		}
		.back-home-btn{
			
		}
	}
	
</style>
